import { Panel } from 'comps/common';
import { Form, Input, Button, Icon } from 'antd';
import ServiceManageList from './service-manager-list';
import * as React from 'react';

const FormItem = Form.Item;

class ServiceManageSearch extends React.Component {

  onSearchSubmit(evt) {
    evt.preventDefault();
    var query = this.props.form.getFieldValue("query")
    this.props.onFormSubmit(query);
  }

  render() {
    const inputProps = this.props.form.getFieldProps('query', {});

    return (
      <Panel title="服务检索" spinner={this.props.isFetching}>
        <Form className="search-form" onSubmit={this.onSearchSubmit.bind(this)} form={this.props.form} inline>
          <FormItem label="搜索：">
            <Input {...inputProps} placeholder="输入 服务名 、应用名 、机器IP 进行查询，留空则搜索所有" id="query" style={{width:500}}/>
          </FormItem>
          <Button htmlType="submit" type="primary"><Icon type="search"/>搜索</Button>
        </Form>
        <ServiceManageList services={this.props.services}/>
      </Panel>
    );
  }
}

ServiceManageSearch = Form.create({})(ServiceManageSearch)

export default ServiceManageSearch;
